<template>
  <div class="demo">
    <div class="demo-title">受控面板</div>
    <div class="demo-content">
      <Space direction="vertical" :size="12">
        <DatePicker
          :mode="mode1"
          show-time
          @open-change="handleOpenChange1"
          @panel-change="handlePanelChange1"
        />
        <DatePicker.RangePicker
          :placeholder="['Start month', 'End month']"
          format="YYYY-MM"
          :value="value"
          :mode="mode2"
          @panel-change="handlePanelChange2"
          @change="handleChange"
        />
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Dayjs } from 'dayjs';
  import Space from '@sscd/space';
  import DatePicker from '@sscd/date-picker';
  const mode1 = ref<any>('time');
  const mode2 = ref<any>(['month', 'month']);
  const value = ref<[Dayjs, Dayjs]>();
  const handleOpenChange1 = (open: boolean) => {
    if (open) {
      mode1.value = 'time';
    }
  };
  const handleChange = (val: [Dayjs, Dayjs] | [string, string]) => {
    value.value = val as [Dayjs, Dayjs];
  };
  const handlePanelChange1 = (_val: [Dayjs, Dayjs], mode: any) => {
    mode1.value = mode;
  };
  const handlePanelChange2 = (val: [Dayjs, Dayjs] | [string, string], mode: any[]) => {
    value.value = val as [Dayjs, Dayjs];
    mode2.value = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]];
  };
</script>
